<template>
  <div class="reg-login-container">
    <div class="login-body">
      <div class="login-header">
        <div class="header-top">
          <div class="top-text">
            ABOUT DUAL BY FIT ISLAND·MAKE A BOOKING·MANAGE WAITINGS
          </div>
          <a @click="toIndex">Go Index</a>
        </div>
        <div class="header-bottom">
          <a id="mainlogo" href="#"><img src="../static/slider/LOGO.png" /> </a>
          <div class="btm-text">ONLINE BOOKINGS</div>
        </div>
      </div>
      <div class="login-content">
        <div class="flow-box">
          <div class="flow-title">
            <div class="title">BOOKING INFO</div>
            <div class="sub-title">PROCESS AND TERMS</div>
          </div>
          <div class="flow-body">
            <div class="flow-item">
              <div class="flow-icon">
                <img src="../static/slider/right.png" alt="" />
              </div>
              <div class="flow-num">1</div>
              <div class="flow-text">
                <div class="item-title">CALENDAR</div>
                <div class="item-subtitle">SELECT DATES & SEATS</div>
              </div>
            </div>
            <div class="flow-item">
              <div class="flow-icon">
                <img src="../static/slider/right.png" alt="" />
              </div>
              <div class="flow-num">2</div>
              <div class="flow-text">
                <div class="item-title">REGISTER</div>
                <div class="item-subtitle">
                  REGISTER YOUR<br />BOOKING REQUEST
                </div>
              </div>
            </div>
            <div class="flow-item">
              <div class="flow-icon">
                <img src="../static/slider/right.png" alt="" />
              </div>
              <div class="flow-num">3</div>
              <div class="flow-text">
                <div class="item-title">PAYMENT</div>
                <div class="item-subtitle">CONFIRM BOOKING<br />BY DEPOSIT</div>
              </div>
            </div>
          </div>
        </div>
       <div class="info-box"></div>
      </div>
      <div class="login-footer">
        <div class="foot-body">
          <a id="subLogo" href="#"><img src="../static/slider/LOGO.png" /> </a>
          <span class="foot-web"> 2024 @ DUAL BY FIT ISLAND</span>
          <span class="foot-link">
            : www.dual by fit island.sg .: contact . terms & condition . fag :
            private dinner</span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Predetermine",
  data() {
    return {
      isLogin: true,
      userInfo: {
        userName: "",
        password: "",
        rePassword: "",
      },
    };
  },
  methods: {
    toRegister() {
      this.isLogin = !this.isLogin;
    },
    toIndex() {
      this.$router.push({
        name: "Index",
      });
    },
    register() {
      this.$login.register(this.userInfo).then((res) => {
        console.log(res, "注册");
        if (res.code === 200) {
          this.$alert("Account created successfully!", "SUCCESS", {
            confirmButtonText: "confirm",
            callback: (action) => {
              this.isLogin = true;
            },
          });
        } else {
          this.$message({
            message: res.message,
            type: "warning",
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.reg-login-container {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  background-color: rgb(244, 222, 185);
  display: flex;
  justify-content: center;
}

.login-body {
  width: 1020px;
  border-right: 0.5px solid #2e0c00;
  border-left: 0.5px solid #2e0c00;
  height: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

.login-header {
  flex: 2;
  background-color: #2e0c00;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.header-top {
  display: flex;
  justify-content: space-between;
  color: #b08e4b;
}

.header-top a {
  cursor: pointer;
}

.login-header a {
  text-decoration: none;
  color: #b08e4b;
}
.header-top > a {
  color: #f3deb9;
}
.login-content {
  border-top: 4px solid #b08e4b;
  flex: 16;
  padding: 10px 0px 40px 40px;
}
.login-footer {
  flex: 1;
  padding: 20px 40px;
  border-top: 4px solid #b08e4b;
}

#mainlogo img {
  width: 200px;
}
.btm-text {
  color: #f3deb9;
  font-size: 28px;
  margin-left: 15px;
}

.header-bottom {
  display: flex;
}

.flow-box {
  display: flex;
  align-items: center;
}
.flow-title {
  margin-right: 40px;
}
.flow-title .title {
  color: #5a3819;
  font-size: 20px;
  font-weight: bold;
}
.flow-title .sub-title {
  color: #b08e4b;
}

.flow-body {
  display: flex;
  justify-content: space-around;
}

.flow-item {
  display: flex;
  align-items: center;
  margin-right: 40px;
}
.flow-icon {
  display: flex;
  align-items: center;
}
.flow-icon img {
  width: 16px;
  height: 30px;
}
.flow-num {
  font-size: 36px;
  font-weight: bold;
  color: #b08e4b;
  margin: 0 10px;
}

.flow-text .item-title {
  color: #b08e4b;
  font-weight: bold;
}
.flow-text .item-subtitle {
  color: #b08e4b;
  font-size: 12px;
}



#subLogo img {
  width: 100px;
}

.foot-body {
  display: flex;
  align-items: center;
}
.foot-web {
  font-size: 14px;
  color: #5a3819;
  margin: 0 5px;
}
.foot-link {
  font-size: 12px;
  color: #b08e4b;
}


</style>